<template>
	<view class="diy-form">
		<view v-for="(item,index) in showFormData" :key="`key${index}`" class="item-parent">
			<!-- <view v-if="item.dataList.length > 0" class="item-parent-title">{{item.title}}</view> -->
			<view class="item-child-list">
				<view v-for="(c_item,c_index) in item.dataList" :key="c_index" class="item-child"
					@tap="selType(index,c_index)">
					<text :class="c_item.icon"
						:style="{'font-size':(c_item.icon_size?c_item.icon_size:'45rpx')}"></text>
					<text class="">{{c_item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import diyFormData from "@/config/diy_form_data_copy";
	export default {
		name: 'diy-form',
		data() {
			return {
				show_sel_form: false,
				type_index: 1,
				diyformData: {},
				showFormData: []
			}
		},
		props: {

		},
		methods: {
			selType(index, c_index) {
				this.getFormData()
				console.log('list',diyFormData.useDiyData[0].dataList[0].ext);
				var info = JSON.parse(JSON.stringify(this.showFormData[index].dataList[c_index])) ;
				console.log('info',info.ext);
				if (info.type == 'username') {
					let checkUserNameStatus = true;
					try {
						var parentFormData = this.$parent ? JSON.parse(JSON.stringify(this.$parent.formData)) : [];
						//console.log(parentFormData)
						for (var i = 0; i < parentFormData.length; i++) {
							console.log(parentFormData[i])
							if (parentFormData[i].type == 'username') {
								checkUserNameStatus = false;
								break;
							}
						}
					} catch (e) {
						console.log('错误', e)
					}
					if (checkUserNameStatus == false) {
						this.$api.msg('"姓名"项只能选择一次');
						return;
					}
				}
				this.$emit('selectType', info);
			},
			getFormData() {
				this.showFormData = []
				this.showFormData = diyFormData.useDiyData;
			}
		},
		mounted() {
			this.getFormData()
		},
	}
</script>


<style lang="scss">
	.diy-form {

		.item-parent {
			padding: 10rpx 20rpx;

			.item-child-list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;

				.item-child {
					display: flex;
					align-items: center;
					width: 24%;
					font-size: 24rpx;
					padding: 10rpx;
					border: 1px solid #edf0f4;
					margin: 20rpx 0;
					.iconfont {
						margin-right: 20rpx;
					}
				}
			}
		}

		.title {
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: #6CA1D0;
			font-size: 30rpx;
			letter-spacing: 2rpx;
		}

		.change-type {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;

			.type-cative {
				border-bottom: 2rpx solid #6CA1D0 !important;
				color: #6CA1D0;
			}

			.type-list {
				width: 50%;
				border-bottom: 2rpx solid #eee;
				height: 100%;
			}
		}
	}
</style>